import React from "react";
import PropTypes from 'prop-types';
import { Icon } from "weaver-mobile";
import { When } from "../if";

export default class Loading extends React.Component {
  render() {
    const { loading, content, className='' } = this.props;

    return (
      <When condition={loading}>
        <div style={{ padding: 10, textAlign: 'center' }} className={className}>
          <Icon type='loading' />
          <When condition={!!content}>
            <div style={{ paddingTop: 10, color: '#aaa' }}>{content}</div>
          </When>
        </div>
      </When>
    );
  }
}

Loading.propTypes = {
  loading: PropTypes.bool.isRequired,
  content: PropTypes.string
};

Loading.defaultProps = {
  loading: false,
  content: ''
};